<script setup lang="ts">
import { Md5 } from 'ts-md5';
import { useRoute, useRouter } from 'vue-router';
import type { FieldType } from 'vant';
import { changePasswordPost } from '@/services/login.ts';

const $route = useRoute();
const $router = useRouter();

const passwordFormRef = ref();
const loading = ref(false);
const passwordShow = ref<FieldType>('text');
const postData = reactive({
  newPassword: '',
  againPassword: '',
});

const rules = reactive({
  newPassword: [
    { required: true, message: '密码不能为空' },
    {
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,15}$/,
      message: '长度应为8-15个字符，必须包含大写、小写字母和数字',
    },
  ],
  againPassword: [
    {
      validator: () => postData.newPassword === postData.againPassword,
      message: '两次输入的密码不一致',
    },
  ],
});
const onSubmitClick = async () => {
  try {
    await passwordFormRef.value.validate();
    loading.value = true;
    const { err } = await changePasswordPost({
      newPassword: Md5.hashStr(postData.newPassword),
      captcha: $route.query.captcha,
      loginPhone: $route.query.loginPhone,
    });
    loading.value = false;
    if (err) {
      showToast(err);
      return;
    }
    showToast('密码修改成功');
    $router.push({ path: '/login', replace: true });
  } catch (errors) {
    console.log('表单验证失败', errors);
  }
};
</script>

<template>
  <div class="login-container">
    <van-form :model="postData" :rules="rules" ref="passwordFormRef">
      <div class="vant-input">
        <van-field
          v-model="postData.newPassword"
          :rules="rules.newPassword"
          :type="passwordShow"
          @click-right-icon="passwordShow = passwordShow === 'password' ? 'text' : 'password'"
          name="newPassword"
          placeholder="8-15个字符，必须包含大小写字母和数字"
        >
          <template #right-icon>
            <div class="svgIcon">
              <svg-icon :icon-class="passwordShow === 'password' ? 'close' : 'open'" size="1.2em" />
            </div>
          </template>
        </van-field>
      </div>

      <div class="vant-input">
        <van-field
          v-model="postData.againPassword"
          :rules="rules.againPassword"
          :type="passwordShow"
          @click-right-icon="passwordShow = passwordShow === 'password' ? 'text' : 'password'"
          name="againPassword"
          placeholder="再次输入新的登录密码"
        >
          <template #right-icon>
            <div class="svgIcon">
              <svg-icon :icon-class="passwordShow === 'password' ? 'close' : 'open'" size="1.2em" />
            </div>
          </template>
        </van-field>
      </div>

      <van-button
        :loading="loading"
        @click="onSubmitClick"
        type="primary"
        color="#E89000"
        round
        block
      >
        提交
      </van-button>
    </van-form>
  </div>
</template>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 16px;
  background: #fff;

  .vant-input {
    margin-top: 16px;
    width: 100%;
    background: #f6f6f6;

    .van-cell {
      background: #f6f6f6;
    }

    .svgIcon {
      display: flex;
    }
  }

  .van-button {
    margin: 28px 0;
  }
}
</style>
